<template>
  <div class="cal-wrapper">

    <div class="cal-header">
      <div class="l" >
        <div @click="preMonth" v-show="!next" class="arrow-left icon">&nbsp</div>
      </div>
      <div class="title">{{curYearMonth}}</div>
      <div class="r" >
        <div @click="nextMonth" v-show="next" class="arrow-right icon">&nbsp</div>
      </div>
    </div>
    <div class="cal-body">
      <div class="weeks">
        <span v-for="(dayName, dayIndex) in i18n[calendar.options.locale].dayNames" class="item" :key="dayIndex">
          {{i18n[calendar.options.locale].dayNames[(dayIndex + calendar.options.weekStartOn) % 7]}}
        </span>
      </div>

      <div class="dates">
        <div v-for="date in dayList" class="item" :class="[{
            today: date.status ? (today == date.date) : false,
            event: date.status ? (date.date == selectedDay) || date.title != undefined&&today == date.date&&todayStaus : false,
            [calendar.options.className] : (date.date == selectedDay) || date.title != undefined&&today == date.date&&todayStaus
          }]" :key="date.date">
          <p class="date-num" @click="handleChangeCurday(date)" 
           :class="{on:date.status ? date.date.split('/')[2]:false,hasEvent:date.status?date.date==today && todayStaus ||(date.date == selectedDay):false}"
            ref="aa">
            {{date.date.split('/')[2]}}</p>
          <div>
            <span v-if="date.status ? (date.title != undefined && date.big) : false" class="is-today" :style="{marginLeft:!(date.big&&date.sm)?'-2.5px':'-6px'}"></span>
            <span v-if="date.status ? (date.title != undefined && date.sm) : false" class="is-todaySingle" :style="{marginLeft:!(date.big&&date.sm)?'-2.5px':'2px'}"></span>
          </div>
          <span v-if="date.status ? date.date == selectedDay || today == date.date && todayStaus : false" class="is-event" :style="{borderColor: '#fff', backgroundColor: date.date == selectedDay ||  today == date.date  ? '#e8393d' : 'inherit'}"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import i18n from "../../assets/js/i18n.js";
  import { dateTimeFormatter, isEqualDateStr } from "../../assets/js/tools.js";

  const inBrowser = typeof window !== "undefined";
  export default {
    name: "cal-panel",
    data() {
      return {
        i18n,
        // dateToday: ''
        todayback: false,
        todayback1: "",
        todayPoint: false,
        todayStaus: true,
        next:true,
      };
    },
    props: {
      events: {
        type: Array,
        required: true
      },
      calendar: {
        type: Object,
        required: true
      },
      selectedDay: {
        type: String,
        required: false,
      },
      big: {
        type: Boolean,
        required: false
      }
    },
    created() {
      // console.log(this.events)
      /* let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth() + 1;
      let day = today.getDate();
      let todayback1 = year + "/" + month + "/" + day;
      this.todayback1 = todayback1;
      if (today) {
        this.todayback = true;
      } */
    },
    computed: {
      dayList() {
        //判断当日有无活动显示对应白点
        // let month = this.todayback1.split('/')[1]< 10 ? "0" + this.todayback1.split('/')[1] : this.todayback1.split('/')[1];
        // let day =  this.todayback1.split('/')[2]< 10 ? "0" + this.todayback1.split('/')[2] : this.todayback1.split('/')[2];
        let today = new Date();
        let year = today.getFullYear();
        let month = today.getMonth() + 1;
        month = month < 10 ? "0" + month : month;
        let day = today.getDate();
        day = day < 10 ? "0" + day : day;
        let todayPoint = year + "/" + month + "/" + day;
        console.log(todayPoint);
        // this.events.forEach((event) => {
        //   if(event.date == todayback1) {
        //   this.todayPoint = true
        // }
        // })
        let firstDay = new Date(
          this.calendar.params.curYear,
          this.calendar.params.curMonth,
          1
        );
        // console.log(firstDay)
        let dayOfWeek = firstDay.getDay();
        // 根据当前日期计算偏移量 // Calculate the offset based on the current date
        if (this.calendar.options.weekStartOn > dayOfWeek) {
          dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn + 7;
        } else {
          dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn;
        }

        let startDate = new Date(firstDay);
        startDate.setDate(firstDay.getDate() - dayOfWeek);
        let item,
          status,
          tempArr = [],
          tempItem;
        for (let i = -1; i < 41; i++) {
          item = new Date(startDate);
          item.setDate(startDate.getDate() + i);
          if (this.calendar.params.curMonth === item.getMonth()) {
            status = 1;
          } else {
            status = 0;
          }
          tempItem = {
            date: `${item.getFullYear()}/${item.getMonth() +
              1}/${item.getDate()}`,
            status: status,
            customClass: []
          };
          this.events.forEach(event => {
            if (isEqualDateStr(event.date, tempItem.date)) {
              tempItem.title = event.gpName;
              tempItem.big = event.dtFlag;
              tempItem.sm = event.xtFlag;
              // tempItem.date = event.date
              //  console.log(event.xtFlag)
              tempItem.desc = event.desc || "";
              if (event.customClass) tempItem.customClass.push(event.customClass);
            }
          });
          tempArr.push(tempItem);
        }
        return tempArr;
      },
      today() {
        let dateObj = new Date();
        return `${dateObj.getFullYear()}/${dateObj.getMonth() +
          1}/${dateObj.getDate()}`;
      },

      curYearMonth() {
        let tempDate = Date.parse(
          new Date(
            `${this.calendar.params.curYear}/${this.calendar.params.curMonth +
            1}/01`
          )
        );
        return dateTimeFormatter(
          tempDate,
          this.i18n[this.calendar.options.locale].format
        );
      },
      customColor() {
        return this.calendar.options.color;
      },
      customColor1() {
        return this.calendar.options.color1;
      }
    },
    methods: {
      nextMonth() {
        if(this.next){

        this.$EventCalendar.nextMonth();
        this.$emit("month-changed", this.curYearMonth);
        this.next = false
        /* let today = new Date();
        if(today) {
        this.todayback = false
      } */
      }
      },
      preMonth() {
        if(!this.next){
        this.$EventCalendar.preMonth();
        this.$emit("month-changed", this.curYearMonth);
        this.next = true
        /* let today = new Date();
        if(today) {
        this.todayback = false
      } */
        this.$nextTick(function () {
          // console.log(this.$refs.aa)
          if (this.$refs.aa.innerText == this.todayback1.split("/")[2]) {
            this.todayback = false;
          }
        });
        let month =
          this.todayback1.split("/")[1] < 10
            ? "0" + this.todayback1.split("/")[1]
            : this.todayback1.split("/")[1];
        let day =
          this.todayback1.split("/")[2] < 10
            ? "0" + this.todayback1.split("/")[2]
            : this.todayback1.split("/")[2];
        let todayback1 = this.todayback1.split("/")[0] + "/" + month + "/" + day;
        this.events.forEach(event => {
          if (event.date == todayback1) {
            this.todayPoint = true;
          }
        });
        this.todayback = true;
        }
      },
      handleChangeCurday(date) {
        if (date.status) {
        this.todayStaus = false;
        this.$emit("cur-day-changed", date.date);
        }
      }
    }
  };
</script>
<style scoped>
  #calendar-cont .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item .is-today.todayPoint {
    width: 6px;
    height: 6px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    margin-left: -2.5px !important;
    margin-top: 8px;
  }
</style>